<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document类型</title>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="content"></div>
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F9%2F57d76e11ac7ce.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638257025&t=c825fa850ae1eb76d034e298e54a6e5d" alt="空白图片" name="meinv"/>
    </div>
  </div>
  <fieldset>
    <legend> which color do you prefer ?</legend>
    <ul>
      <!-- 
        所有的单选按钮都有名为"color"的 name 属性，但它们的 ID 都不一样。这是因为 ID 是为了
        匹配对应的<label>元素，而 name 相同是为了保证只将三个中的一个值发送给服务器。然后就可以像
        下面这样取得所有单选按钮：
       -->
      <li>
        <input type="radio" name="color" id="colorRed" value="red"/>
        <label for="colorRed">Red</label>
      </li>
      <li>
        <input type="radio" name="color" id="colorGreen" value="green"/>
        <label for="colorGreen">Green</label>
      </li>
      <li>
        <input type="radio" name="color" id="colorYellow" value="yellow"/>
        <label for="colorYellow">Yellow</label>
      </li>
    </ul>
  </fieldset>
</body>
<script>
/**1.Document类型
 *   a.Document 类型是 JavaScript 中表示文档节点的类型。在浏览器中，文档对象 document 是HTMLDocument 的实例（HTMLDocument 继承 Document）表示
 *     整个 HTML 页面。
 *   b.document 是 window对象的属性，因此是一个全局对象。具有如下特征：
 *     - nodeType 等于 9；
 *     - nodeName 值为"#document"；
 *     - nodeValue 值为 null；
 *     - parentNode 值为 null；
 *     - ownerDocument 值为 null；
 *     - 子节点可以是 DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或 Comment 类型。
 *   c.Document 类型可以表示 HTML 页面或其他 XML 文档，但最常用的还是通过 HTMLDocument 的实例取得 document 对象。document 对象可用于获取关于页面
 *     的信息以及操纵其外观和底层结构。
 * **/

/**2.文档子节点
 *   a.虽然 DOM 规范规定 Document 节点的子节点可以是 DocumentType、Element、ProcessingInstruction 或 Comment，但也提供了两个访问子节点的快捷
 *     式。
 *   b.第一个是 documentElement 属性，始终指向 HTML 页面中的<html>元素。虽然 document.childNodes 中始终有<html>元素，但使用 documentElement *     属性可以更快更直接地访问该元素。
 *   c.作为 HTMLDocument 的实例，document 对象还有一个 body 属性，直接指向<body>元素。因为这个元素是开发者使用最多的元素，所以 JavaScript 代码中
 *     经常可以看到 document.body，
 *   d.所有主流浏览器都支持 document.documentElement 和 document.body。
 *   e.Document 类型另一种可能的子节点是 DocumentType。<!doctype>标签是文档中独立的部分，其信息可以通过 doctype 属性
 *    （在浏览器中是 document.doctype）来访问，
 *   f.一般来说，appendChild()、removeChild()和 replaceChild()方法不会用在 document 对象上。这是因为文档类型（如果存在）是只读的，而且只能有一
 *     个Element 类型的子节点（即<html>，已经存在了）。元素是 HTMLHtmlElement 的实例，HTMLHtmlElement 继承 HTMLElement，HTMLElement 继承
 *     Element，因此 HTML 文档可以包含子节点，但不能多于一个。
 * **/
  function checkDocumenNode(){
    //1.查看document节点的子节点
    let domlist = document.childNodes;
    console.log('domlist:',domlist);//NodeList(2)[<!DOCTYPE html>,html];
    //2.查看document.documentElement
    console.log(document.documentElement === domlist[1]);//true
    //3.查看document.body;
    let body = document.getElementsByTagName('body')[0];
    console.log(document.body === body);//true
    //4.查看document.doctype
    console.log(document.doctype === domlist[0]);//true
    console.log(document.doctype === document.firstChild);//true
  }
  // checkDocumenNode();


  /**3.文档信息
   *   a.document 作为 HTMLDocument 的实例，还有一些标准 Document 对象上所没有的属性。这些属性提供浏览器所加载网页的信息。
   *   b.title:包含<title>元素中的文本，通常显示在浏览器窗口或标签页的标题栏。通过这个属性可以读写页面的标题，修改后的标题也会反映在浏览器标题栏上。不过，
   *     修改 title 属性并不会改变<title>元素。
   *   c.URL: 包含当前页面的完整 URL（地址栏中的 URL）。
   *   d.domain: 包含页面的域名。
   *   e.referrer: 包含链接到当前页面的那个页面的 URL。如果当前页面没有来源，则 referrer 属性包含空字符串。所有这些信息都可以在请求的 HTTP 头部信息中
   *     获取，只是在 JavaScript 中通过这几个属性暴露出来而已。
   * 
   * **/
   function checkDocumentAttribute(){
     //1.取得完整的 URL
     let url = document.URL;
     console.log("🚀 ~ file: 14.1.2 Document 类型.html ~ line 68 ~ checkDocumentAttribute ~ url", url)
     //2.取得域名
     let domain = document.domain;
     console.log("🚀 ~ file: 14.1.2 Document 类型.html ~ line 71 ~ checkDocumentAttribute ~ domain", domain)
     //3. 取得来源
     let referrer = document.referrer;
     console.log("🚀 ~ file: 14.1.2 Document 类型.html ~ line 74 ~ checkDocumentAttribute ~ referrer", referrer)
   }
  //  checkDocumentAttribute();
   //127.0.0.1:5500/code/%E7%AC%AC14%E7%AB%A0%20DOM/14.1%20%E8%8A%82%E7%82%B9%E5%B1%82%E7%BA%A7/14.1.2%20Document%20%E7%B1%BB%E5%9E%8B.html
   //127.0.0.1
   //http://127.0.0.1:5500/code/%E7%AC%AC14%E7%AB%A0%20DOM/14.1%20%E8%8A%82%E7%82%B9%E5%B1%82%E7%BA%A7/14.1.2%20Document%20%E7%B1%BB%E5%9E%8B.html

   /**4.定位元素
    *   a.使用 DOM 最常见的情形可能就是获取某个或某组元素的引用，然后对它们执行某些操作。
    *   b.getElementById()和 getElementsByTagName()就是 Document 类型提供的两个方法。
    *   c.如果页面中存在多个具有相同 ID 的元素，则 getElementById()返回在文档中出现的第一个元素。
    *   d.getElementsByTagName()是另一个常用来获取元素引用的方法。这个方法接收一个参数，即要获取元素的标签名，返回包含零个或多个元素的 NodeList。在
    *     HTML 文档中，这个方法返回一个HTMLCollection 对象。考虑到二者都是“实时”列表，HTMLCollection 与 NodeList 是很相似的。
    *   e.HTMLCollection 对象还有一个额外的方法 namedItem()，可通过标签的 name 属性取得某一项的引用，还可以直接使用中括号来获取，
    *   f.对于 HTMLCollection 对象而言，中括号既可以接收数值索引，也可以接收字符串索引。而在后台，数值索引会调用 item()，字符串索引会调用 namedItem()。
    *   g.对于 document.getElementsByTagName()方法，虽然规范要求区分标签的大小写，但为了最大限度兼容原有 HTML 页面，实际上是不区分大小写的。如果是在
    *     XML 页面（如 XHTML）中使用，那么 document.getElementsByTagName()就是区分大小写的。
    *   h.getElementsByName:HTMLDocument 类型上定义的获取元素的第三个方法。顾名思义，这个方法会返回具有给定 name 属性的所有元素。getElementsByName()
    *     方法最常用于单选按钮，因为同一字段的单选按钮必须具有相同的 name 属性才能确保把正确的值发送给服务器，
    *   i.getElementsByName()方法也返回 HTMLCollection。不过在这种情况下，namedItem()方法只会取得第一项（因为所有项的 name 属性都一样）。
    * 
    * **/
  function checkGetElement(){
    let srsList = document.getElementsByTagName('img');
    console.log(srsList.length);
    console.log(srsList.item(0).src);
    console.log(srsList[0].src);
    //测试namedItem
    console.log(srsList.namedItem('meinv') === srsList[0]);//true
    console.log(srsList.item('meinv') === srsList[0]);//true
    //测试getElementByName()
    let radios = document.getElementsByName('color');
    console.log('radios:',radios);
  }
  checkGetElement();
  //1
  //https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F9%2F57d76e11ac7ce.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638257025&t=c825fa850ae1eb76d034e298e54a6e5d
  //同上
</script>
</html>
